<template>
	<view class="comment-editor bg-white">
		<!-- 评分 -->
		<view class="dish-score">
			<uni-rate
				size="36"
				v-model="score"
				allowHalf
				touchable
			/>
			<view class="dish-score-rating">{{ score }}</view>
		</view>
		<!-- 输入框 -->
		<uni-easyinput
			type="textarea"
			autoHeight
			v-model="comment"
			placeholder="分享一下你的感受吧..."
		></uni-easyinput>
		<!-- 提交按钮 -->
		<button
			class="submit-btn"
			type="primary"
			@tap="onSubmit"
		>
			匿名评论
		</button>
	</view>
</template>

<script>
export default {
	name: 'CommentEditor',
	data() {
		return {
			comment: '',
			score: 0,
		};
	},
	methods: {
		onSubmit() {
			this.$emit('submit', { score: this.score, comment: this.comment });
		},
	},
};
</script>

<style scoped>
.comment-editor {
	padding: 26rpx;
	/* background: #fff; */
}
.dish-score {
	display: flex;
	align-items: center;
	margin-bottom: 26rpx;
}

.dish-score-rating {
	font-size: 30px;
	color: #fac909;
	font-weight: bold;
	margin-left: 16rpx;
}

.submit-btn {
	margin-top: 48rpx;
}
</style>
